<template>
    <div class="settings-page">
        <div class="container page">
            <div class="row">

            <div class="col-md-6 offset-md-3 col-xs-12">
                <h1 class="text-xs-center">Your Settings</h1>

                <form>
                <fieldset>
                    <fieldset class="form-group">
                        <input class="form-control" type="text" placeholder="URL of profile picture" v-model="user.image">
                    </fieldset>
                    <fieldset class="form-group">
                        <input class="form-control form-control-lg" type="text" placeholder="Your Name" v-model="user.username">
                    </fieldset>
                    <fieldset class="form-group">
                        <textarea class="form-control form-control-lg" rows="8" placeholder="Short bio about you" v-model="user.bio"></textarea>
                    </fieldset>
                    <fieldset class="form-group">
                        <input class="form-control form-control-lg" type="email" placeholder="Email" v-model="user.email">
                    </fieldset>
                    <fieldset class="form-group">
                        <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
                    </fieldset>
                    <button class="btn btn-lg btn-primary pull-xs-right" @click="onSubmit">
                        Update Settings
                    </button>
                </fieldset>
                </form>
            </div>

            </div>
        </div>
    </div>
</template>
<script>
import { getUser,updateUser } from '@/api/user'
export default {
    middleware: 'authenticated',
    name:'SettingsIndex',
    data(){
        return {
            user:{
                "email": '',
                "bio": "",
                "image": '',
                "username":'',
                "password":''
            }
        }
    },
    methods:{
        async onSubmit(){
          try {
            const { data } =  await updateUser({
              user:this.user
            })
            alert('更新成功')
            this.$router.push('/')

          } catch (error) {
            this.errors = error.response.data.errors
          }
            
        },
        async getUserFN(){
            const { data } = await getUser()
            this.user = data.user
        }
    },
    created(){
        this.getUserFN()
    }
}
</script>
